<template>
  <div class="container">
    <!-- 蓝色部分 -->
    <div class="blue">
      <router-link to="/home/index">
      <div class="nav">
        <van-icon name="arrow-left" color="#fff" />
      </div>
      </router-link>
      <!-- 除导航栏部分 -->
      <div class="title">门票</div>
      <div class="flex">
        <van-tag round type="primary" id="tag">当日多次入园</van-tag>
        <div>
          <router-link to="#">
            预定须知
            <van-icon name="arrow" color="#fff" />
          </router-link>
        </div>
      </div>
    </div>
    <!-- 白色部分 -->
    <div class="white">
      <div>请选择入园日期</div>
      <div>日历价格为标准票价格。</div>
      <!-- 日历格子 -->
      <div class="date">
        <div>今日03-23</div>
        <div>
          明日03-24
          <span>￥500</span>
        </div>
        <div>
          后日03-25
          <span>￥400</span>
        </div>
        <div>
          <div class="datemore" @click="show = true"><span>更多</span><br /><span>日期</span></div>
          <div class="calendar">
            <van-cell :value="date"  />
            <van-calendar
              v-model="show"
              type="multiple"
              color="#0367d7"
              @confirm="onConfirm"
            />
          </div>
        </div>
      </div>
      <!-- 购买数量 -->
      <div class="count">
        <div>请选择购买数量</div>
        <div class="Eticket">
          <div class="normal" v-for="(item, i) in ticketlist" :key="i">
            <div>{{ item.name }}</div>
            <div>{{ item.kind }}</div>
            <div class="price">
              <div>￥{{ item.price }}</div>
              <!-- +-按钮 -->
              <div class="button">
                <button @click="item.count++">+</button>
                <span>{{ item.count }}</span>
                <button @click="item.count--" :disabled="item.count == 0">
                  -
                </button>
              </div>
            </div>
          </div>
          <!-- <div>
            <div class="child">
              <div>儿童票</div>
              <div>电子票</div>
              <div class="price">
                <div>￥528.00</div>
                 +-按钮 
                <div></div>
              </div>
            </div>
          </div>
          <div>
            <div class="old">
              <div>老年人票</div>
              <div>电子票</div>
              <div class="price">
                <div>￥528.00</div>
                 +-按钮 
                <div></div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 底部固定提交栏 -->
    <div class="submit">
      <div><van-icon name="shopping-cart" size="40px" /></div>
      <span id="count">合计</span><span id="p">￥{{ total }}</span>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      date: "",
      show: false,
      ticketlist: [
        { name: "标准票", kind: "电子票", price: 300, count: 0 },
        { name: "儿童票", kind: "电子票", price: 260, count: 0 },
        { name: "老年人票", kind: "电子票", price: 260, count: 0 },
      ],
    };
  },
  methods: {
    onConfirm(date) {
      this.show = false;
      this.text = `选择了 ${date.length} 个日期`;
    },
  },
  computed: {
    total() {
      let sum = 0;
      this.ticketlist.forEach(value => {
        sum += value.price * value.count;
      });
      return sum;
    },
  },
};
</script>

<style scoped>
.blue {
  background-color: #0265d5;
  color: #fff;
  height: 13rem;
}
.nav {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 25px;
}
.title {
  font-size: 1.8em;
  font-weight: 1000;
  padding-left: 25px;
  padding-bottom: 20px;
}
.router-link-active {
  text-decoration: none;
  color: #fff;
}
a {
  text-decoration: none;
  color: #fff;
  font-size: 0.5em;
}
.flex {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
#tag {
  margin-left: 25px;
  padding: 3px 10px;
}
.flex > div {
  margin-right: 25px;
}
.white {
  padding-left: 25px;
  padding-right: 25px;
  position: relative;
  top: -35px;
  border-radius: 20px;
  background-color: #fefefe;
}
.white > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 6px;
  border-radius: 20px;
}
.date {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 20px 0;
  font-size: 0.7em;
  text-align: center;
  border-radius: 15px;
}
.date > div {
  white-space: normal;
}
.date > div:first-child {
  color: gray;
}
.date > div:not(:last-child) {
  padding-top: 10px;
  border: 1px solid gray;
  width: 80px;
  height: 60px;
  border-radius: 15px;
}
.datemore {
  border: 1px solid gray;
  width: 50px;
  height: 60px;
  border-radius: 15px;
  font-size: 1.2em;
  font-weight: bold;
  align-items: center;
  padding-top: 10px;
}
.date > div:nth-child(2) > span {
  font-size: 1.3em;
  font-weight: bolder;
}
.date > div:nth-child(3) > span {
  font-size: 1.3em;
  font-weight: bolder;
}
.count > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
}
.Eticket {
  margin-right: 30px;
  margin-bottom: 120px;
}
.Eticket > div {
  width: 100%;
  height: 100px;
  border: 1px solid gray;
  border-radius: 15px;
  padding: 15px 15px;
  margin-bottom: 20px;
}
.normal > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 8px;
}
.normal > div:nth-child(2) {
  font-size: 0.8em;
  padding-bottom: 12px;
}
.price {
  display: flex;
  justify-content: space-between;
}
.price > div:first-child {
  font-weight: bold;
  font-size: 1.2em;
}
/* .price > div:nth-child(2) {
  background-color: pink;
  width: 10px;
  height: 10px;
} */
.child > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 8px;
}
.child > div:nth-child(2) {
  font-size: 0.8em;
  padding-bottom: 12px;
}
.old > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 8px;
}
.old > div:nth-child(2) {
  font-size: 0.8em;
  padding-bottom: 12px;
}
.calendar {
  /* background-color: pink; */
  position: relative;
  top: -28px;
  left: 5px;
  width: 10px;
}
.submit {
  background-color: white;
  display: flex;
  width: 100vw;
  height: 20vw;
  position: fixed;
  bottom: 0px;
}
.submit > button {
  border: none;
  background: #2865d8;
  border-radius: 30px;
  color: white;
  width: 80px;
  height: 40px;
  margin: 10px 0 0 17vw;
}
.submit > div {
  margin: 10px 20px 0 20px;
}
#count {
  margin-top: 10px;
}
.submit > span {
  margin-right: 20px;
  padding-top: 10px;
}
#p {
  color: #f9604d;
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 5px;
}
.button {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 15px;
}
.button > button {
  border: none;
  background-color: #e6ecf6;
  color: #2865d8;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.3em;
}
.button > span {
  font-weight: bold;
  margin: 6px 10px 0px 10px;
}
</style>
